<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>个人博客</title>
		<link href="css/me.css" type="text/css" rel="stylesheet" />
		<link href="css/Bootstrap.css" type="text/css" rel="stylesheet">
		<link href="./img/tubiao.png" rel="shortcut icon">
		<script type="text/javascript">
		document.documentElement.style.fontSize = window.innerWidth / 50 + 'px';
		window.addEventListener('resize', function(){
			document.documentElement.style.fontSize = window.innerWidth / 50 + 'px';
		}, false)
	</script>
	</head>

	<body>
		<div class="centainer-fluid">
			<!--头部 -->
			<div class="row"> 
				<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 col-lg-offset-1 col-md-offset-1 top">
					<div class="top_left">
						<img src="img/top.jpg" />
					</div>
					<ul>
						<li><a href="#noe">主页</a></li>
						<li><a href="#tow">日志</a></li>
						<li><a href="#three">相册</a></li>
						<li><a href="#four">留言板</a></li>
						<li><a href="#five">说说</a></li>
						<li><a href="#qi">个人档案</a></li>
						<li><a href="#">音乐</a></li>
						<li><a href="#">更多</a></li>
					</ul>
				</div>
			</div>
			<!--整体内容区-->
			<div class="row">
				<!--左侧内容区-->
				<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 left">
					<div class="left_1">
						<ul>
							<li><a href="#noe">我的主页</a></li>
							<li><a href="#tow">个人动态</a></li>
							<li><a href="#three">特别关注</a></li>
							<li><a href="#four">个人收藏</a></li>
							<li><a href="#five">相册</a></li>
							<li><a href="#fix">个人日志</a></li>
							<li><a href="#qi">其他</a></li>
						</ul>
					</div>
				</div>
				<!--右侧内容-->
				<div class="col-lg-8 col-md-8 col-sm-8 c9ol-xs-12  right">
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 right_1">
							<!--图片播放区-->
							<div class="picture" id="one">
								<div class="img-box">
									<div class="picture_1">
										<img src="img/top1.jpg" />
										<img src="img/top2.jpg" />
										<img src="img/top3.jpg" />
										<img src="img/top4.jpg" />
										<img src="img/top5.jpg" />
									</div>
								</div>
							</div>
							<!--中间内容栏-->
							<!--第一行-->
							<div class="row centenr">
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centenr_left">
									<h4>Coded with Love!</h4>
									<div class="icn">
										<i class="icn_1"><img src="img/love.png"></i>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis. Quisque suscipit fermentum sodales.</p>
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centenr_right">
									<h4>Coded with Love!</h4>
									<div class="icn">
										<i class="icn_1"><img src="img/en2.png"></i>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis. Quisque suscipit fermentum sodales.</p>
									</div>
								</div>
							</div>
							<!--第二行-->
							<div class="row centenr" id="tow">
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centenr_left">
									<h4>Coded with Love!</h4>
									<div class="icn">
										<i class="icn_1"><img src="img/love.png"></i>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis. Quisque suscipit fermentum sodales.</p>
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centenr_right">
									<h4>Coded with Love!</h4>
									<div class="icn">
										<i class="icn_1"><img src="img/en2.png"></i>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis. Quisque suscipit fermentum sodales.</p>
									</div>
								</div>
							</div>
							<!--第三行-->
							<div class="row centenr">
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centenr_left">
									<h4>Coded with Love!</h4>
									<div class="icn">
										<i class="icn_1"><img src="img/love.png"></i>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis. Quisque suscipit fermentum sodales.</p>
									</div>
								</div>
								<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centenr_right">
									<h4>Coded with Love!</h4>
									<div class="icn">
										<i class="icn_1"><img src="img/en2.png"></i>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis. Quisque suscipit fermentum sodales.</p>
									</div>
								</div>
							</div>
							<!--横向内容区-->
							<div class="row" id="three">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 line ">
									<h3>About Us</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
										irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
									<h5>Why Choose Us</h5>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
										irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
									<p class="line_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua <br> .Sarfraz Shoukat - Owner <u>Greepit.com</u></p>
								</div>
							</div>
							<!--图片展示区-->
							<div class="row look">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<h3>Portfolio</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
									<ul>
										<li><a href="#">Show All</a></li>
										<li><a href="#">css</a></li>
										<li><a href="#">HTML/PHP</a></li>
										<li><a href="#">Javascript</a></li>
									</ul>
									<!--图片-->
									<div class="row middle" id="four">
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_1">
											<div class="middle_pic">
												<img src="img/pic1.png">
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_2">
											<div class="middle_pic">
												<img src="img/pic2.png">
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_3">
											<div class="middle_pic">
												<img src="img/pic3.png">
											</div>
										</div>
									</div>
									<div class="row middle">
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_1">
											<div class="middle_pic">
												<img src="img/pic4.png">
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_2">
											<div class="middle_pic">
												<img src="img/pic5.png">
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_3">
											<div class="middle_pic">
												<img src="img/pic6.png">
											</div>
										</div>
									</div>
									<div class="row middle">
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_1">
											<div class="middle_pic">
												<img src="img/pic7.png">
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_2">
											<div class="middle_pic">
												<img src="img/pic8.png">
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 middle_3">
											<div class="middle_pic">
												<img src="img/pic9.png">
											</div>
										</div>
									</div>
								</div>
							</div>
							<!--比例图分布-->
							<div class="row" id="five">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 line ">
									<h3>About Us</h3>
								</div>
							</div>
							<div class="row peicen">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 juli">
									<h4>Photoshop</h4>
									<div class="peicen_1">
										<i class="peicen_size">65</i>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 juli">
									<h4 class="en">HTML5</h4>
									<div class="peicen_1">
										<i class="peicen_size">45</i>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 juli">
									<h4 class="en">jQuery</h4>
									<div class="peicen_1">
										<i class="peicen_size">85</i>
									</div>
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 juli">
									<h4 class="en">CSS3</h4>
									<div class="peicen_1">
										<i class="peicen_size">95</i>
									</div>
								</div>
							</div>
							<!--4列图片布局—-->
							<div class="row">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 line ">
									<h3>About Us</h3>
								</div>
							</div>
							<div class="row" id="fix">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_1 ">
									<img src="img/back1.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_2">
									<img src="img/back2.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_3">
									<img src="img/back6.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_4">
									<img src="img/back4.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_5 ">
									<img src="img/back2.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_6">
									<img src="img/back6.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_7">
									<img src="img/back1.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_8">
									<img src="img/back2.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_9 ">
									<img src="img/back4.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_10">
									<img src="img/back4.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_11">
									<img src="img/back2.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_12">
									<img src="img/back6.png">
								</div>
							</div>
							<!--
							<div class="row">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_5 ">
									<img src="img/back1.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_6">
									<img src="img/back1.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_7">
									<img src="img/back4.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_8">
									<img src="img/back6.png">
								</div>
							</div>
							<div class="row">
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_9 ">
									<img src="img/back1.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_10">
									<img src="img/back2.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_11">
									<img src="img/back4.png">
								</div>
								<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 back_12">
									<img src="img/back6.png">
								</div>
							</div>
							-->
						<div class="row foot" di="qi">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 foot_1">
									<p>© 2012 . Some Rights Reserved.</p>
									<p>More Templates 模板之家 - Collect from 网页模板</p>
								</div>
						</div>
			</div>
		</div>
		<script>
			console.dir(document.querySelectorAll('#fix > div'));
			var hh = document.querySelector('#fix > div').clientWidth;
			console.dir(hh);
			document.querySelectorAll('#fix > div').forEach(function(v,i){
				v.style.height = hh + 'px';
			})
		</script>
	</body>

</html>